<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./js/js.js"></script>
    <script src="./layui/layui.js"></script>
    <script src="./js/jquery-1.9.1.min.js"></script>
</head>

<style>
    body {
        max-width: 750px;
        margin: 0 auto;
        background-color: #2a285b;
    }

    .topbox {
        position: relative;
    }

    .topimg {
        width: 100%;
    }

    .startbtn {
        position: absolute;
        left: 7rem;
        top: 47rem;
        background-color: transparent;
        border: none;
    }

    .start {
        width: 25rem;

    }

    .img1 {
        width: 90%;
        display: block;
        margin: 0 auto;
    }


    .contentbox {
        position: relative;
        margin: 0 1rem;
        background-color: #ffe4d2;
        border-radius: 1rem;
        box-sizing: border-box;
        padding: 1rem;
        margin-bottom: 4rem;
    }

    .bg1 {
        width: 100%;
        height: 100%;
        background: url('./img/bg1.png');
        background-size: 100% 100%;
        box-sizing: border-box;
        padding: 4rem 2rem;
        position: relative;
    }

    .title {
        font-size: 1.8rem;
        font-weight: bold;
        color: #7d2f09;
        margin-bottom: 2.25rem;
    }

    .div1 {
        width: 100%;
        height: 4rem;
        background-color: white;
        border-radius: 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 1rem;
        margin-bottom: 1rem;
    }

    .color {
        background-color: #ffd0b0;
    }

    .div2 {
        width: 100%;
        height: 4rem;
        background-color: #ffd0b0;
        border-radius: 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 1rem;
        margin-bottom: 1rem;
    }

    .div1left {
        font-size: 1.4rem;
        color: #7d2f09;
    }

    .div1right {
        width: 1.75rem;
        height: 1.75rem;
    }

    .order {
        display: flex;
        justify-content: center;
        position: absolute;
        left: 8rem;
        top: -2rem;
    }

    .order_one,
    .order_two,
    .order_three {
        width: 5rem;
        height: 5rem;
        background: url('./img/组\ 4.png');
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 2.5rem;
    }

    .order_two {
        position: relative;
        left: -0.5rem;
    }

    .order_three {
        position: relative;
        left: -1rem;
    }

    .order_one>div,
    .order_two>div,
    .order_three>div {
        position: relative;
        top: -0.5rem;
    }

    .next_1,
    .next_2,
    .next_3,
    .next_4,
    .next_5,
    .next_6,
    .next_7,
    .next_8,
    .next_9,
    .next_10 {
        width: 100%;
    }

    .rule {
        position: relative;
        margin: 0 2rem;
        height: 32.5rem;
        background-color: #ffe4d2;
        border-radius: 1rem;
        box-sizing: border-box;
        padding: 1rem;
        margin-bottom: 4rem;
    }

    .rulebox {
        position: absolute;
        left: 6.5rem;
        top: -2rem;
    }

    .rule_icon {
        height: 6rem;
    }

    .ruletext {
        font-size: 1.5rem;
        color: #7d2f09;
        height: 100%;
        overflow: auto;
    }

    .ruletext>div {
        line-height: 2.5rem;
    }
    

    .layui-layer {
        width: 90% !important;
        left: 10 !important;
        box-shadow: none !important;
    }


    .dialog_img1 {
        width: 80%;
        display: block;
        margin: 0 auto;
    }

    .close {
        width: 3.75rem;
        display: block;
        margin: 0 auto;
        margin-top: 1.5rem;
    }

    input[type="radio"] {
        width: 1.75rem !important;
        height: 1.75rem !important;
    }

    input[type="checkbox"] {
        width: 1.75rem !important;
        height: 1.75rem !important;
    }

    .bigbox {
        box-sizing: border-box;
        margin: 0 1rem;
        background: url('./img/矩形\ 1.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }


    .imgbox {
        width: 30rem;
        height: 25rem;
        background: url('./img/弹窗背景.png');
        background-size: 100% 100%;
        margin: 0 auto;
    }

    .dialog_title1 {
        font-size: 2rem;
        color: #9d3311;
        text-align: center;
        padding-top: 6rem;
    }

    .dialog_title2 {
        font-size: 1.5rem;
        text-align: center;
        margin: 0 auto;
        padding-top: 1rem;
        color: #2f2f2f;
        width: 56%;
    }

    .time {
        position: absolute;
        top: 70%;
        left: 62%;
        font-size: 2rem;
        color: #2f2f2f;
        border-radius: 50%;
    }
</style>

<body>
    <!-- <div class="topimg"></div> -->
    <div class="topbox">
        <img class="topimg" src="./img/bg.png" alt="">
        <button class="startbtn">
            <img class="start" src="./img/start.png" alt="">
        </button>
    </div>

    <!-- 第一题 -->
    <div class="bigbox">
        <div class="contentbox">
            <div class="bg1">
                <div class="order">
                    <div class="order_one">
                        <div>第</div>
                    </div>
                    <div class="order_two">
                        <div>一</div>
                    </div>
                    <div class="order_three">
                        <div>题</div>
                    </div>
                </div>
                <div class="title">1、请问您有没有在电信线上办理过业务？</div>
                <form>
                    <label class="div1">
                        <div class="div1left">有</div>
                        <input type="radio" name="zhang">
                    </label>
                    <label class="div1">
                        <div class="div1left">没有</div>
                        <input type="radio" name="zhang">
                    </label>
                </form>

                <img class="next_1" src="./img/btn.png" alt="">
            </div>
        </div>
    </div>

    <!-- 第二题 -->
    <div class="bigbox">
        <div class="contentbox">
            <div class="bg1">
                <div class="order">
                    <div class="order_one">
                        <div>第</div>
                    </div>
                    <div class="order_two">
                        <div>二</div>
                    </div>
                    <div class="order_three">
                        <div>题</div>
                    </div>
                </div>
                <div class="title">2、您最常使用的电信线上APP有哪些?</div>
                <form>
                    <label class="div1">
                        <div class="div1left">安徽电信营业厅</div>
                        <input type="radio" name="zhang">
                    </label>
                    <label class="div1">
                        <div class="div1left">安徽掌上10000号</div>
                        <input type="radio" name="zhang">
                    </label>
                    <label class="div1">
                        <div class="div1left">翼支付</div>
                        <input type="radio" name="zhang">
                    </label>
                    <label class="div1">
                        <div class="div1left">企业微信</div>
                        <input type="radio" name="zhang">
                    </label>
                </form>

                <img class="next_2" src="./img/btn.png" alt="">
            </div>
        </div>
    </div>

    <!-- 第三题 -->
    <div class="bigbox">
        <div class="contentbox">
            <div class="bg1">
                <div class="order">
                    <div class="order_one">
                        <div>第</div>
                    </div>
                    <div class="order_two">
                        <div>三</div>
                    </div>
                    <div class="order_three">
                        <div>题</div>
                    </div>
                </div>
                <div class="title">3、电信云厅有号卡专区、智慧家庭、5G专区、终端专区、宽带专区，每个活动有相应的优惠，请是否愿意了解？</div>
                <form>
                    <label class="div1">
                        <div class="div1left">有</div>
                        <input type="radio" name="zhang">
                    </label>
                    <label class="div1">
                        <div class="div1left">没有</div>
                        <input type="radio" name="zhang">
                    </label>
                    <label class="div1">
                        <div class="div1left">可以考虑</div>
                        <input type="radio" name="zhang">
                    </label>
                    <label class="div1">
                        <div class="div1left">不感兴趣</div>
                        <input type="radio" name="zhang">
                    </label>
                </form>

                <img class="next_3" src="./img/btn.png" alt="">
            </div>
        </div>
    </div>
    <!-- 第四题 -->
    <div class="bigbox">
        <div class="contentbox">
            <div class="bg1">
                <div class="order">
                    <div class="order_one">
                        <div>第</div>
                    </div>
                    <div class="order_two">
                        <div>四</div>
                    </div>
                    <div class="order_three">
                        <div>题</div>
                    </div>
                </div>
                <div class="title">4.本次电信云厅活动您是通过什么形式了解到的？（可多选）</div>
                <label class="div1">
                    <div class="div1left">朋友推荐</div>
                    <input class="chekcbox" type="checkbox">
                </label>
                <label class="div1">
                    <div class="div1left">营业厅引流</div>
                    <input type="checkbox">
                </label>
                <label class="div1">
                    <div class="div1left">扫描二维码</div>
                    <input type="checkbox">
                </label>
                <img class="next_4" src="./img/btn.png" alt="">
            </div>
        </div>
    </div>

    <!-- 第五题 -->
    <div class="bigbox">
        <div class="contentbox">
            <div class="bg1">
                <div class="order">
                    <div class="order_one">
                        <div>第</div>
                    </div>
                    <div class="order_two">
                        <div>五</div>
                    </div>
                    <div class="order_three">
                        <div>题</div>
                    </div>
                </div>
                <div class="title">5.“丹桂飘香 金蛋送礼”砸中金蛋后可以得到什么奖品？</div>
                <form>
                    <label class="div1">
                        <div class="div1left">视频会员</div>
                        <input type="radio" name="zhang">
                    </label>
                    <label class="div1">
                        <div class="div1left">100M流量</div>
                        <input type="radio" name="zhang">
                    </label>
                    <label class="div1">
                        <div class="div1left">50元优惠券</div>
                        <input type="radio" name="zhang">
                    </label>
                    <label class="div1">
                        <div class="div1left">再来一次</div>
                        <input type="radio" name="zhang">
                    </label>
                </form>

                <img class="next_5" src="./img/btn.png" alt="">
            </div>
        </div>
    </div>

    <!-- 第六题 -->
    <div class="bigbox">
        <div class="contentbox">
            <div class="bg1">
                <div class="order">
                    <div class="order_one">
                        <div>第</div>
                    </div>
                    <div class="order_two">
                        <div>六</div>
                    </div>
                    <div class="order_three">
                        <div>题</div>
                    </div>
                </div>
                <div class="title">2.本次电信云厅活动您最感兴趣的有哪些?(可多选)</div>
                <label class="div1">
                    <div class="div1left">丹桂飘香 金蛋送礼</div>
                    <input class="chekcbox" type="checkbox">
                </label>
                <label class="div1">
                    <div class="div1left">燃动金秋 智家送好礼</div>
                    <input type="checkbox">
                </label>
                <label class="div1">
                    <div class="div1left">全屋智能到店有礼 百分百赢大奖</div>
                    <input type="checkbox">

                </label>
                <label class="div1">
                    <div class="div1left">燃动金秋 装宽带送豪礼</div>
                    <input type="checkbox">
                </label>
                <img class="next_6" src="./img/btn.png" alt="">
            </div>
        </div>
    </div>

    <!-- 第七题 -->
    <div class="bigbox">
        <div class="contentbox">
            <div class="bg1">
                <div class="order">
                    <div class="order_one">
                        <div>第</div>
                    </div>
                    <div class="order_two">
                        <div>七</div>
                    </div>
                    <div class="order_three">
                        <div>题</div>
                    </div>
                </div>
                <div class="title">7.“全屋智能到店有礼 百分百赢大奖”活动可以通过哪种方式参与？</div>
                <form>
                    <label class="div1">
                        <div class="div1left">砸金蛋</div>
                        <input type="radio" name="zhang">
                    </label>
                    <label class="div1">
                        <div class="div1left">大转盘</div>
                        <input type="radio" name="zhang">
                    </label>
                    <label class="div1">
                        <div class="div1left"> 翻牌</div>
                        <input type="radio" name="zhang">
                    </label>
                    <label class="div1">
                        <div class="div1left">好友分享</div>
                        <input type="radio" name="zhang">
                    </label>
                </form>
                <img class="next_7" src="./img/btn.png" alt="">
            </div>
        </div>
    </div>
    <!-- 第八题 -->
    <div class="bigbox">
        <div class="contentbox">
            <div class="bg1">
                <div class="order">
                    <div class="order_one">
                        <div>第</div>
                    </div>
                    <div class="order_two">
                        <div>八</div>
                    </div>
                    <div class="order_three">
                        <div>题</div>
                    </div>
                </div>
                <div class="title">8.本次“全屋智能到店有礼 百分百赢大奖”活动一共有几款产品？</div>
                <form>
                    <label class="div1">
                        <div class="div1left">3款</div>
                        <input type="radio" name="zhang">
                    </label>
                    <label class="div1">
                        <div class="div1left">10款</div>
                        <input type="radio" name="zhang">
                    </label>
                    <label class="div1">
                        <div class="div1left">7款</div>
                        <input type="radio" name="zhang">
                    </label>
                    <label class="div1">
                        <div class="div1left">5款</div>
                        <input type="radio" name="zhang">
                    </label>
                </form>
                <img class="next_8" src="./img/btn.png" alt="">
            </div>
        </div>
    </div>

    <!-- 第九题 -->
    <div class="bigbox">
        <div class="contentbox">
            <div class="bg1">
                <div class="order">
                    <div class="order_one">
                        <div>第</div>
                    </div>
                    <div class="order_two">
                        <div>九</div>
                    </div>
                    <div class="order_three">
                        <div>题</div>
                    </div>
                </div>
                <div class="title">9.“燃动金秋 智家送好礼”活动有哪些产品？</div>
                <form>
                    <label class="div1">
                        <div class="div1left">全屋Wifi、天翼看家</div>
                        <input type="radio" name="zhang">
                    </label>
                    <label class="div1">
                        <div class="div1left">全光组网、天翼看家</div>
                        <input type="radio" name="zhang">
                    </label>
                    <label class="div1">
                        <div class="div1left">智能阳台、全屋Wifi</div>
                        <input type="radio" name="zhang">
                    </label>
                    <label class="div1">
                        <div class="div1left">焕新计划、5G双提速包</div>
                        <input type="radio" name="zhang">
                    </label>
                </form>
                <img class="next_9" src="./img/btn.png" alt="">
            </div>
        </div>
    </div>

    <!-- 第十题 -->
    <div class="bigbox">
        <div class="contentbox">
            <div class="bg1">
                <div class="order">
                    <div class="order_one">
                        <div>第</div>
                    </div>
                    <div class="order_two">
                        <div>十</div>
                    </div>
                    <div class="order_three">
                        <div>题</div>
                    </div>
                </div>
                <div class="title">10.“世界电信日”是几月几日？</div>
                <form>
                    <label class="div1">
                        <div class="div1left">5月17日</div>
                        <input type="radio" name="zhang">
                    </label>
                    <label class="div1">
                        <div class="div1left">4月30日</div>
                        <input type="radio" name="zhang">
                    </label>
                    <label class="div1">
                        <div class="div1left">5月10日</div>
                        <input type="radio" name="zhang">
                    </label>
                    <label class="div1">
                        <div class="div1left">10月1日</div>
                        <input type="radio" name="zhang">
                    </label>
                </form>
                <img class="next_10" src="./img/btn.png" alt="">
            </div>
        </div>
    </div>

    <!-- 答题规则 -->
    <div class="rule">

        <div class="bg1">
            <div class="rulebox">
                <img class="rule_icon" src="./img/rule.png" alt="">
            </div>
            <div class="ruletext">
                <div> 1.每位用户可参与一次答题活动，同一身份证号，手机号均视为同一用户。</div>
                <div>2.流量24小时自动充值到用户账户，当月使用，次月清零，不可结转</div>
                <div>3.翼支付权益金7个工作日充值到账</div>
                <div>4.权益会员中奖后自动充值,充值成功后有效期30天,过期作废,不延期.</div>
                <div>6.奖品以最后答对提数等级赠送相应奖品,所有奖品不可叠加.</div>
                <div>6.答题范围涉及活动</div>
                <div>①“丹桂飘香 金蛋送礼”活动，以砸金蛋形式进行，奖品为50元优惠券</div>
                <div>②“全屋智能到店有礼 百分百赢大奖”活动，以大转盘形式进行，奖品为流量/影视会员/优惠券。共涉及7款产品</div>
                <div>③“燃动金秋 智家送好礼”活动，以组合形式将全屋Wifi、天翼看家两个产品以买一送一形式进行销售</div>
                <div>7.奖品数量有限，先到先得</div>
                <div>8.活动时间：2021年10月1日--2021年10月7日</div>
            </div>
        </div>
    </div>



    <!-- 开始答题 -->
    <div class="right_0" style="display: none;">
        <div class="imgbox">
            <div class="dialog_title1">温馨提示</div>
            <div class="dialog_title2">
                <span style="color: red;">答题错误</span>
                <span>视为答题结束,共一次机会,最高可得权益会员月卡</span>
            </div>
            <div class="time">15</div>
        </div>
    </div>

    <!-- 答对三题 -->
    <div class="right_3" style="display: none;">
        <div class="imgbox">
            <div class="dialog_title1">恭喜您答对3题</div>
            <div class="dialog_title2">获得1G流量</div>
        </div>
        <img class="close" src="./img/close.png" alt="">
    </div>

    <!-- 答对4题 -->
    <div class="right_4" style="display: none;">
        <div class="imgbox">
            <div class="dialog_title1">恭喜您答对4题</div>
            <div class="dialog_title2">获得1G流量</div>
        </div>
        <img class="close" src="./img/close.png" alt="">
    </div>

    <!-- 答对5题 -->
    <div class="right_5" style="display: none;">
        <div class="imgbox">
            <div class="dialog_title1">恭喜您答对5题</div>
            <div class="dialog_title2">获得10元翼支付权益金</div>
        </div>
        <img class="close" src="./img/close.png" alt="">
    </div>

    <!-- 答对六题 -->
    <div class="right_6" style="display: none;">
        <div class="imgbox">
            <div class="dialog_title1">恭喜您答对6题</div>
            <div class="dialog_title2">获得10元翼支付权益金</div>
        </div>
        <img class="close" src="./img/close.png" alt="">
    </div>

    <!-- 答对7题 -->
    <div class="right_7" style="display: none;">
        <div class="imgbox">
            <div class="dialog_title1">恭喜您答对7题</div>
            <div class="dialog_title2">获得10元翼支付权益金</div>
        </div>
        <img class="close" src="./img/close.png" alt="">
    </div>

    <!-- 答对8题 -->
    <div class="right_8" style="display: none;">
        <div class="imgbox">
            <div class="dialog_title1">恭喜您答对8题</div>
            <div class="dialog_title2">获得10元翼支付权益金</div>
        </div>
        <img class="close" src="./img/close.png" alt="">
    </div>

    <!-- 答对9题 -->
    <div class="right_9" style="display: none;">
        <div class="imgbox">
            <div class="dialog_title1">恭喜您答对9题</div>
            <div class="dialog_title2">获得10元翼支付权益金</div>
        </div>
        <img class="close" src="./img/close.png" alt="">
    </div>


    <!--答对10题 -->
    <div class="right_10" style="display: none;">
        <img class="dialog_img1" src="./img/dialog3.png" alt="">
        <img class="close" src="./img/close.png" alt="">
    </div>
</body>


<script>

    layui.use(['layer'], function () {
        var layer = layui.layer

        //开始答题
        $('.startbtn').click(function () {
            var index = layer.open({
                type: 1,
                content: $('.right_0'),
                skin: 'layui-layer-nobg',
                title: false,
                closeBtn: 0,
                shade: 0.5,
                // shadeClose: true
            });

            setInterval(() => {
                var a = parseInt($('.time').text())
                if (a > 0) {
                    $('.time').text(--a)
                }
                else {
                    layer.close(index);
                    $(".startbtn").attr('disabled', true);
                }
            }, 1000);

        })

        $('.next_1').click(function () {
            layer.alert('...')
        })


        //答对三题
        $('.next_3').click(function () {
            layer.open({
                type: 1,
                content: $('.right_3'),
                skin: 'layui-layer-nobg',
                title: false,
                closeBtn: 0,
                shade: 0.5,
                // shadeClose: true
            });
        })

        // 答对4题
        $('.next_4').click(function () {
            layer.open({
                type: 1,
                content: $('.right_4'),
                skin: 'layui-layer-nobg',
                title: false,
                closeBtn: 0,
                shade: 0.5,
                // shadeClose: true
            });
        })

        //答对5题
        $('.next_5').click(function () {
            layer.open({
                type: 1,
                content: $('.right_5'),
                skin: 'layui-layer-nobg',
                title: false,
                closeBtn: 0,
                shade: 0.5,
                // shadeClose: true
            });
        })

        //答对六题
        $('.next_6').click(function () {
            layer.open({
                type: 1,
                content: $('.right_6'),
                skin: 'layui-layer-nobg',
                title: false,
                closeBtn: 0,
                shade: 0.5,
                // shadeClose: true
            });
        })

        //答对七题
        $('.next_7').click(function () {
            layer.open({
                type: 1,
                content: $('.right_7'),
                skin: 'layui-layer-nobg',
                title: false,
                closeBtn: 0,
                shade: 0.5,
                // shadeClose: true
            });
        })

        // 答对8题
        $('.next_8').click(function () {
            layer.open({
                type: 1,
                content: $('.right_8'),
                skin: 'layui-layer-nobg',
                title: false,
                closeBtn: 0,
                shade: 0.5,
                // shadeClose: true
            });
        })

        //答对9题
        $('.next_9').click(function () {
            layer.open({
                type: 1,
                content: $('.right_9'),
                skin: 'layui-layer-nobg',
                title: false,
                closeBtn: 0,
                shade: 0.5,
                // shadeClose: true
            });
        })

        //答对10题正确弹窗
        $('.next_10').click(function () {
            layer.open({
                type: 1,
                content: $('.right_10'),
                skin: 'layui-layer-nobg',
                title: false,
                closeBtn: 0,
                shade: 0.6,
                // shadeClose: true
            });
        })

        //关闭弹窗
        $('.close').click(function () {
            layer.closeAll();
        })

        //点击单选框
        $('.div1').click(function () {
            $(this).addClass('color').siblings().removeClass('color')
        })



    })

</script>

</html>